<template>
  <div :class="['settings', 'panel', {'closePanel': !panelStatus}]">
    <button class="btn-setting" @click="ctlPanel">
        <i :class="['el-icon-setting', {'gearRotate': panelStatus}]"></i>
    </button>
    <div class="wrapper">
        <!-- 标题 -->
        <div class="head">
            <span class="head-title">设置</span>
            <button class="head-reset" @click="resetConfig">重置</button>
        </div>
        <!-- 设置 -->
        <div class="options">
            <div class="item">
                <span>开启雪花</span>
                <el-switch
                    @change="checkSnowStatus"
                    v-model="checkSnow"
                    active-color="var(--sm-frost-color)"
                    inactive-color="#222">
                </el-switch>
            </div>

            <div class="item">
                <span>关闭音乐</span>
                <el-switch
                    v-model="checkMusic"
                    active-color="var(--sm-frost-color)"
                    inactive-color="#222">
                </el-switch>
                
            </div>
            
            <div class="item">
                <span>固定头部</span>
                <el-switch
                    @change="checkHeadPosition"
                    v-model="checkHead"
                    active-color="var(--sm-frost-color)"
                    inactive-color="#222">
                </el-switch>
                
            </div>

            <div class="item">
                <span>背景色彩</span>
                <el-color-picker
                    v-model="bgcolor" 
                    @active-change="checkCbg"
                    @change="cleanColor"
                ></el-color-picker>
                
            </div>
        </div>
        <!-- theme -->
        <div class="themes">
            <!-- 一行 -->
            <div class="theme-linebar">
                <!-- theme块 -->
                <div class="theme-card" v-for="theme in themeList" :key="theme.name" :title="theme.name" @click="changeTheme(theme.name)">
                    <!-- 头部 -->
                    <div class="theme-card-head" :style="`background:${theme.head}`"></div>
                    <!-- 中心 -->
                    <div class="theme-card-center" :style="`background:${theme.center}`">
                        <div class="theme-card-main" :style="`background:${theme.main}`"></div>
                    </div>
                </div>

            </div>
        </div>
        <!-- 控制 -->
        <div class="ctl">
            <div >
                <span>导航栏虚化</span>
                <el-slider v-model="navBlur" :max="30" @input="blurHead"></el-slider>
            </div>

            <div >
                <span>文章栏虚化</span>
                <el-slider v-model="mainBlur" :max="30" @input="blurArticle"></el-slider>
            </div>

            <div>
                <span>背景区虚化</span>
                <el-slider v-model="bgBlur" :max="30" @input="blurBg"></el-slider>
            </div>

        </div>
        
    </div>
  </div>
</template>

<script>
export default {
    name: 'SettingBox',
    data() {
        return {
            panelStatus: false, // 面板状态，默认关闭
            checkSnow: false,   // 开启雪花
            checkMusic: false,   // 关闭音乐
            checkHead: false,   // 固定头部
            navBlur: 7,
            mainBlur: 7,
            bgBlur: 0,
            bgcolor: null, // 背景颜色
            themeList: [
                {
                    name: 'dark',
                    head: '#aa9898',
                    center: '#413535',
                    main: '#f05050',
                },
                {
                    name: 'light',
                    head: '#333',
                    center: '#fff',
                    main: '#909090',
                },
                {
                    name: 'default',
                    head: '#0055',
                    center: '#333',
                    main: '#959595',
                }
            ]
        }
    },
    methods: {
        // 开启雪花
        checkSnowStatus() {
            this.$bus.$emit('checkSnow', this.checkSnow?1:0)
        },
        // 控制面板开启
        ctlPanel() {
            this.panelStatus = !this.panelStatus
        },
        // 固定头部
        checkHeadPosition() {
            if(this.checkHead) {
                // 固定
                localStorage.setItem('_fixedHead', 'fixed')
                document.getElementById('mainHeader').style.position = 'fixed'
            } else {
                // 不固定
                localStorage.setItem('_fixedHead', 'absolute')
                document.getElementById('mainHeader').style.position = 'absolute'
            }
        },
        // 背景颜色
        checkCbg(color) {
            let cbg = document.getElementById('cbg')
            cbg.style.backgroundColor = color
            
        },
        // 无色 - 在选择时清空
        cleanColor(color) {
            if(!color) {
                this.bgcolor = null
                document.getElementById('cbg').removeAttribute('style')
                localStorage.removeItem('_bgcolor')
            }
        },

        // 切换主题
        changeTheme(themeName) {
            this.$store.commit('setTheme', themeName)
        },
        // 导航栏虚化
        blurHead(val) {
            document.body.style.setProperty('--blur-head',val+'px');
        },
        // 文章栏虚化
        blurArticle(val) {
            document.body.style.setProperty('--blur-article',val+'px');
        },
        // 背景区虚化
        blurBg(val) {
            document.body.style.setProperty('--blur-bg',val+'px');
        },
        // 重置
        resetConfig() {
            localStorage.clear()
        }

    },
    watch: {
        // 存储颜色到本地
        bgcolor(changeColor) {
            // 不是null则设置颜色，是null则移除颜色
            if(!changeColor) {
                this.cleanColor(changeColor)
            }
            else localStorage.setItem('_bgcolor', changeColor)
        }
    },
    created() {
        this.checkSnow = localStorage.getItem('_snow') === '1'?true:false
        this.checkMusic = localStorage.getItem('_music') || false
        this.checkHead = localStorage.getItem('_fixedHead') === 'absolute'?false:true
        this.bgcolor = localStorage.getItem('_bgcolor')
    },
    mounted() {
        this.checkCbg(localStorage.getItem('_bgcolor'))
    },
}
</script>

<style lang="less" scoped>
button {
    cursor: pointer;
    outline: none;
}
.settings {
    position:fixed;
    top: 300px;
    right: 0px;
    transition: .3s;
}
.panel {
    width: 240px;
    background: var(--sm-black);
    color: var(--sm-secondary-color);
}
// 关闭panel
.closePanel {
    right: -240px !important;
}

// 面板开关
.btn-setting {
    position: absolute;
    left: -43px;
    background: var(--sm-black);
    border-radius: 20px 0 0 20px;
    color: var(--sm-secondary-color);
    outline: none;
    border: none;
    font-size: 13px;
    padding: 12px 15px;
    cursor: pointer;
}

// 主体包裹
.wrapper {
    color: var(--sm-secondary-color);

    // 面板头部
    .head {
        padding: 4px 15px;
        display: flex;
        justify-content: space-between;

        .head-title {
            font-weight: bold;
            color: var(--sm-primary-color);
        }
        .head-reset {
            font-size: 10px;
            padding: 0px 20px;
            background-color: #f05050;
            border-color: #f05050;
            color: white;
            border-radius: 20px;
            height: 28px;
        }
        .head-reset:hover {
            background-color: #f52f2f;
        }
    }

    // 设置栏
    .options {
        padding: 15px;
        border-bottom: 1px solid rgb(32, 32, 32);

        .item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 5px;
        }
    }

    // theme
    .themes {
        padding: 15px 0;
        overflow: auto;
    

        .theme-linebar {
            display: flex;
            justify-content: space-between;
            margin: 0 15px;
            margin-bottom: 5px;
            height: 40px;
            
            // 卡片
            .theme-card {
                width: 64px;
                cursor: pointer;
            }
            
            // 头部色块
            .theme-card-head {
                height: 10px;
                width: 100%;
                background: #aa9898;
            }

            // 中心色块
            .theme-card-center {
                height: 30px;
                width: 100%;
                background: #413535;

                .theme-card-main {
                    width: 50%;
                    height: 100%;
                    background: #f05050;
                }
            }
        }

    }

    // 控制器
    .ctl {
        padding: 5px 15px;
    }
}


// 齿轮转动
@keyframes gearAnime {
    from {
        transform: rotateZ(0deg);
    }
    to {
        transform: rotateZ(360deg);
    }
}
.gearRotate {
    animation: gearAnime 1.5s linear infinite;
}

</style>